<template>
  <div class="app-container">
    <baidu-map :center="center" :zoom="zoom" :ak="ak" :map-click="false" :double-click-zoom="false"
               @ready="handler"
               class="mapH" style="width: 100%;">
      <template v-for="(collectPoint, inx) in collectPointList">

        <bm-marker v-if="collectPointStatusMap[collectPoint.id].status!=='OnLine' && collectPointStatusMap[collectPoint.id].status!=='F'" :position="collectPoint.position" :dragging="false"
                   :icon="{url: require('@/assets/image/mark_grey.png'), size: {width: 34, height: 50}}"
                   @click="showDetailOpen(inx)" >
          <bm-info-window
            :show="collectPoint.infoWindowShow"
            @close="showDetailClose(inx)"
            @open="showDetailOpen(inx)" :offset="{width: 0, height: 17}">
            <div style="padding: 3px;">
              {{collectPoint.name}}
            </div>
            <div style="padding: 3px;">
              数据时间：{{realDatas[collectPoint.id]['collecTimes']==undefined?' / ':realDatas[collectPoint.id]['collecTimes']}}
            </div>
            <div style="padding: 3px;" v-for="pointParam in realDatas[collectPoint.id]['pointParams']">
              {{pointParam.paramInfo.name}}：
              <span v-html="realDatas[collectPoint.id][`param${(pointParam.paramId)}`]==undefined?' / ':realDatas[collectPoint.id][`param${(pointParam.paramId)}`]"></span> {{pointParam.paramInfo.unit}}
            </div>

          </bm-info-window>
        </bm-marker>

        <bm-marker v-if="collectPointStatusMap[collectPoint.id].status==='OnLine'" :position="collectPoint.position" :dragging="false"
                   :icon="{url: require('@/assets/image/mark_green.png'), size: {width: 34, height: 50}}"
                   @click="showDetailOpen(inx)" >
          <bm-info-window
            :show="collectPoint.infoWindowShow"
            @close="showDetailClose(inx)"
            @open="showDetailOpen(inx)" :offset="{width: 0, height: 17}">
            <div style="padding: 3px;">
              {{collectPoint.name}}
            </div>
            <div style="padding: 3px;">
              数据时间：{{realDatas[collectPoint.id]['collecTimes']==undefined?' / ':realDatas[collectPoint.id]['collecTimes']}}
            </div>
            <div style="padding: 3px;" v-for="pointParam in realDatas[collectPoint.id]['pointParams']">
              {{pointParam.paramInfo.name}}：
              <span v-html="realDatas[collectPoint.id][`param${(pointParam.paramId)}`]==undefined?' / ':realDatas[collectPoint.id][`param${(pointParam.paramId)}`]"></span> {{pointParam.paramInfo.unit}}
            </div>

          </bm-info-window>
        </bm-marker>


        <bm-marker v-if="collectPointStatusMap[collectPoint.id].status==='F'" :position="collectPoint.position" :dragging="false"
                   :icon="{url: require('@/assets/image/mark_red.png'), size: {width: 34, height: 50}}" animation="BMAP_ANIMATION_BOUNCE"
                   @click="showDetailOpen(inx)" >
          <bm-info-window
            :show="collectPoint.infoWindowShow"
            @close="showDetailClose(inx)"
            @open="showDetailOpen(inx)" :offset="{width: 0, height: 17}">
            <div style="padding: 3px;">
              {{collectPoint.name}}
            </div>
            <div style="padding: 3px;">
              数据时间：{{realDatas[collectPoint.id]['collecTimes']==undefined?' / ':realDatas[collectPoint.id]['collecTimes']}}
            </div>
            <div style="padding: 3px;" v-for="pointParam in realDatas[collectPoint.id]['pointParams']">
              {{pointParam.paramInfo.name}}：
              <span v-html="realDatas[collectPoint.id][`param${(pointParam.paramId)}`]==undefined?' / ':realDatas[collectPoint.id][`param${(pointParam.paramId)}`]"></span> {{pointParam.paramInfo.unit}}
            </div>

          </bm-info-window>
        </bm-marker>

      </template>

    </baidu-map>

  </div>
</template>

<script>
  import { getSysConfig } from "@/api/basic/sysConfig";
  import { listCollectPointAndStatus } from "@/api/basic/collectPoint";

export default {
  name: "GisInfo",
  components: {  },
  data() {
    return {
      sysConfig:{},
      map:null,
      center: {lng: 119.30577, lat: 26.085622},
      zoom: 10,
      ak: 'PBN22I5Vj9bmNHV47jqkKwiezrwlU3jF',
      markerDatas:[],
      contextHtml:'',
      detailOpen:false,
      title: '',
      collectPointList:[],
      collectPointStatusMap:{},
      flag:true,
      collectPointVo:null,
      realDatas: {},
    };
  },
  mounted(){

  },
  created() {
    this.getList();
  },
  methods: {
    showDetailOpen(index) {
      this.collectPointList[index].infoWindowShow = true;
    },
    showDetailClose(index) {
      this.collectPointList[index].infoWindowShow = false;
    },
    handler({BMap, map}) {
      this.querySysConfig();
      map.enableScrollWheelZoom(true)
      map.setMapStyle({
        styleJson:[
          {
            "featureType": "manmade",
            "elementType": "all",
            "stylers": {
              "visibility": "off"
            }
          },
          {
            "featureType": "building",
            "elementType": "all",
            "stylers": {
              "visibility": "off"
            }
          },
          {
            "featureType": "poilabel",
            "elementType": "all",
            "stylers": {
              "visibility": "off"
            }
          }
        ]

      });
      // map.centerAndZoom('福州市', 13)
    },
    querySysConfig() {
      getSysConfig().then(response => {
        this.sysConfig = response.data;
        this.center.lng = this.sysConfig.dwLongitude;
        this.center.lat = this.sysConfig.dwLatitude;
        this.zoom = this.sysConfig.hierarchy;
      });
    },
    /** 查询采集信息 */
    getList() {
      listCollectPointAndStatus().then(response => {
        this.collectPointList = response.collectPoints;
        this.collectPointStatusMap = response.collectPointStatus;
        this.realDatas = response.realDatas;
      });
    },

  }
};
</script>
<style>
  .mapH{
    height: calc(100vh - 125px);
  }
  /**<!-- 隐藏地图logo -->**/
  .anchorBL{display:none}
</style>
<style scoped>
  .el-dialog__wrapper >>> .el-dialog{
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position:absolute;
    top:108px;
    left:calc(100% - 632px);;
  }
</style>
